<template>
  <div class="table-box" v-loading="loading">
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="门禁事件" name="1">
        <ProTable
          ref="proTable"
          title="事件列表"
          rowKey="sn"
          :columns="columns"
          :request-api="getTableList"
          :data-callback="dataCallback"
          v-if="columns.length"
        >
          <!-- Expand -->
          <template #expand="scope">
            {{ scope.row }}
          </template>
        </ProTable>
      </el-tab-pane>
      <el-tab-pane label="刷卡跟踪" name="2">
        <ProTable
          ref="proTable1"
          title="刷卡跟踪列表"
          rowKey="sn"
          :columns="columns1"
          :request-api="getTableList"
          :data-callback="dataCallback"
          :reset-callback="resetCallback"
          v-if="columns1.length"
        >
          <!-- Expand -->
          <template #expand="scope">
            {{ scope.row }}
          </template>
        </ProTable>
      </el-tab-pane>
    </el-tabs>
    <EmployeeDialog :dialogVisible="dialogVisible" :handleClose="handleClose" :submitCallback="_submitEmployee" />
    <DoorDialog :dialogVisible="dialogVisible1" :handleClose="handleClose" :submitCallback="_submitDoor" />
  </div>
</template>

<script setup lang="tsx" name="cabinetInfo">
import { ref, onMounted } from "vue";
import ProTable from "@/components/ProTable/index.vue";
import EmployeeDialog from "../components/EmployeeDialog.vue";
import DoorDialog from "../components/DoorDialog.vue";
import { eventTypes } from "@/utils/serviceDict";
import { getEvtList } from "@/api/modules/elevatorControl/query/index";
import { TabsPaneContext } from "element-plus";

const loading = ref(false);
const dialogVisible = ref(false);
const dialogVisible1 = ref(false);
const activeName = ref("1");
const empname = ref("");
const empid = ref("");
const doorname = ref("");
const doorsn = ref("");
const proTable = ref();
const columns = [
  { prop: "sn", label: "序号", width: 120 },
  {
    prop: "startTime",
    label: "开始时间",
    isShow: false,
    search: { el: "date-picker", props: { type: "datetime", valueFormat: "YYYY-MM-DD HH:mm:ss" } }
  },
  {
    prop: "endTime",
    label: "结束时间",
    isShow: false,
    search: { el: "date-picker", props: { type: "datetime", valueFormat: "YYYY-MM-DD HH:mm:ss" } }
  },
  {
    prop: "eventType",
    label: "类型",
    enum: eventTypes,
    search: { el: "select" },
    isShow: false
  },
  {
    prop: "eventtime",
    label: "发生时间",
    minWidth: 200
  },
  {
    prop: "eventtype",
    label: "事件类型",
    minWidth: 120,
    render: scope => {
      return (
        <>
          <span>{eventTypes[scope.row.eventtype - 1].label}</span>
        </>
      );
    }
  },
  {
    prop: "eventnote",
    label: "事件内容",
    minWidth: 200
  },
  // {
  //   prop: "doorname",
  //   label: "梯控点",
  //   minWidth: 200
  // },
  {
    prop: "datatype",
    label: "出入方式",
    minWidth: 120,
    render: scope => {
      const dataTypeVals = ["刷卡", "密码", "二维码", "指纹", "刷脸"];
      return (
        <>
          <span>{dataTypeVals[scope.row.datatype]}</span>
        </>
      );
    }
  },
  {
    prop: "direction",
    label: "方向",
    minWidth: 120,
    render: scope => {
      const directionVals = ["进门", "出门"];
      return (
        <>
          <span>{directionVals[scope.row.direction - 1]}</span>
        </>
      );
    }
  },
  {
    prop: "empname",
    label: "姓名",
    minWidth: 120
  }
  // {
  //   prop: "dptname",
  //   label: "部门",
  //   minWidth: 120
  // }
];
const columns1 = [
  { prop: "sn", label: "序号", width: 120 },
  {
    prop: "empid",
    label: "人员",
    search: { el: "custom", props: { modelValue: empname } },
    isShow: false,
    _click: () => {
      dialogVisible.value = true;
    }
  },
  {
    prop: "startTime",
    label: "开始时间",
    isShow: false,
    search: { el: "date-picker", props: { type: "datetime", valueFormat: "YYYY-MM-DD HH:mm:ss" } }
  },
  {
    prop: "endTime",
    label: "结束时间",
    isShow: false,
    search: { el: "date-picker", props: { type: "datetime", valueFormat: "YYYY-MM-DD HH:mm:ss" } }
  },

  {
    prop: "doorsn",
    label: "位置",
    search: { el: "custom", props: { modelValue: doorname } },
    isShow: false,
    _click: () => {
      dialogVisible1.value = true;
    }
  },
  {
    prop: "clause",
    label: "事件内容",
    search: { el: "input" },
    isShow: false
  },
  {
    prop: "eventtime",
    label: "发生时间",
    minWidth: 200
  },
  {
    prop: "eventtype",
    label: "事件类型",
    minWidth: 120,
    render: scope => {
      return (
        <>
          <span>{eventTypes[scope.row.eventtype - 1].label}</span>
        </>
      );
    }
  },
  {
    prop: "eventnote",
    label: "事件内容",
    minWidth: 200
  },
  // {
  //   prop: "doorname",
  //   label: "梯控点",
  //   minWidth: 200
  // },
  {
    prop: "datatype",
    label: "出入方式",
    minWidth: 120,
    render: scope => {
      const dataTypeVals = ["刷卡", "密码", "二维码", "指纹", "刷脸"];
      return (
        <>
          <span>{dataTypeVals[scope.row.datatype]}</span>
        </>
      );
    }
  },
  {
    prop: "direction",
    label: "方向",
    minWidth: 120,
    render: scope => {
      const directionVals = ["进门", "出门"];
      return (
        <>
          <span>{directionVals[scope.row.direction - 1]}</span>
        </>
      );
    }
  },
  {
    prop: "empname",
    label: "姓名",
    minWidth: 120
  }
  // {
  //   prop: "dptname",
  //   label: "部门",
  //   minWidth: 120
  // }
];
const proTable1 = ref();

const dataCallback = (data: any) => {
  const { records, page } = data;
  loading.value = false;
  return {
    list: records,
    total: page.total
  };
};

const resetCallback = () => {
  empname.value = "";
  empid.value = "";
  doorname.value = "";
  doorsn.value = "";
};

const getTableList = (params: any) => {
  let newParams = JSON.parse(JSON.stringify(params));
  loading.value = true;
  return getEvtList({ ...newParams, empCode: empid.value, doorsn: doorsn.value, deviceType: 1 });
};

/**
 * 关闭弹窗
 */
const handleClose = () => {
  dialogVisible.value = false;
  dialogVisible1.value = false;
};

const _submitEmployee = async (curEmployee: { empname: string; empid: string }) => {
  dialogVisible.value = false;
  empname.value = curEmployee.empname;
  empid.value = curEmployee.empid;
  proTable1.value.getTableList();
};

const _submitDoor = async (curDoor: { doorname: string; doorsn: string }) => {
  dialogVisible1.value = false;
  doorname.value = curDoor.doorname;
  doorsn.value = curDoor.doorsn;
  proTable1.value.getTableList();
};

const handleClick = (tab: TabsPaneContext, event: Event) => {
  console.log(tab, event);
};

onMounted(() => {});
</script>
<style lang="scss">
@import "./index.scss";
</style>
